<template>
  <div class="main">
    <vHeader title="收款方式" @return="$router.go('-1')" />
    <div class="contents">
      <div class="title">
        <img src="../assets/images/tip3.png" />
        <span>请确保您设置的账户为本人实名账户，非本人实名账户付款会导致订单失败且账号被冻结。</span>
      </div>
      <div class="tab">
        <div v-for="(item,index) in list" :class="{active:payeeType===item.currencyId}" @click="payeeType=item.currencyId" :key="index">{{item.currencyName}}</div>
      </div>
      <div class="center">
        <div class="nodata" v-if="payeeList.length == 0">
          <img src="../assets/images/nodata5.png" />
          <div>暂无收款方式<br />请点击下方按钮添加</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import api from "@/api/payee";
  import {
    mapState,
  } from "vuex";
  export default {
    data() {
      return {
        payeeType: '',
        list: [],
        payeeList: [],
      }
    },
    computed: {
      ...mapState({
        loginUserinfo: state => state.global.loginUserinfo,
        baseData: state => state.global.baseData
      }),
    },
    methods: {
      async getPaymentList(){
        let {data} = await api.paymentList();
        if(data.code == 0){
          let arr = [{
            "currencyId": '',
            "id": '',
            "currencyName": "全部",
          }]
          this.list = arr.concat(data.data)
        }
      },
      async getPayeeList(){
        this.payeeList = []
        let {data} = await api.payeeList({
          type: this.payeeType
        });
        if(data.code == 0){
          this.payeeList = data.data || []
        }
      },
    },
    watch:{
      payeeType(val){
        this.getPayeeList()
      }
    },
    mounted() {
      this.getPaymentList()
      this.getPayeeList()
    },
  }
</script>

<style lang="scss" rel="stylesheet/scss" type="text/scss" scoped>
  .main{
    .contents{
      .title{
        height: 42px;
        background: #f5f7fb;
        display: flex;
        img{
          width: 14px;
          height: 14px;
          margin-left: 20px;
          margin-right: 8px;
          margin-top: 8px;
        }
        span{
          font-size: 11px;
          color: #8f949c;
          line-height: 15px;
          margin-right: 25px;
          margin-top: 8px;
        }
      }
      .tab{
        border-bottom: 1px solid #EFF0F3;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 25px;
        div{
          height: 18.5px;
          font-size: 13px;
          color: #666666;
        }
        .active{
          color: #479FFF;
        }
      }
      .center{
        .nodata{
          padding-top: 40px;
          img{
            width: 161px;
            height: 145.5px;
            display: block;
            margin: 0 auto 15px auto;
          }
          div{
            font-size: 14px;
            text-align: center;
            color: #444444;
            line-height: 20px;
          }
        }
      }
    }
  }
</style>
